<template>
  <div class="chat-input">
    <el-input
      v-model="message"
      type="textarea"
      :rows="3"
      placeholder="请输入问题..."
      resize="none"
      @keydown.enter.prevent="handleSend"
    />
    <div class="input-actions">
      <el-button type="primary" :loading="loading" @click="handleSend">
        发送
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['send'])

const message = ref('')

const handleSend = () => {
  const content = message.value.trim()
  if (!content || props.loading) return
  
  const messageObj = {
    id: Date.now().toString(),
    content: content,
    role: 'user',
    time: new Date()
  }
  
  emit('send', messageObj)
  message.value = ''
}
</script>

<style lang="scss" scoped>
.chat-input {
  border-top: 1px solid var(--el-border-color-lighter);
  padding: 20px;
  background-color: #fff;
  
  .input-actions {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
  }
}
</style> 